<template>
  <div>
      <table>
          <tr>
              <td>书名</td>
              <td>作者</td>
              <td>价格</td>
              <td>操作</td>
          </tr>
          <tr v-for="i in book_list" :key="i.id">
              <td>{{i.name}}</td>
              <td>{{i.author}}</td>
              <td>{{i.price}}</td>
              <td>
                  <button @click="delbooks(i.id)">删除</button>
                  <button>修改</button>
              </td>
          </tr>
      </table>
      <p>
          <button @click="up_page">上一页</button>
          <button v-for="i in page_list" :key="i" @click="get_page(i)">{{i}}</button>
          <button @click="down_page">下一页</button>
      </p>
  </div>
</template>

<script>
import axios from 'axios'
export default {
    data() {
        return {
            base_url:'http://127.0.0.1:8000',
            current_page:1,
            book_list:[],
            page_list:[],
            page_sum:0,
        }
    },
    methods: {
        show_books() {
            axios({
                url:this.base_url + '/app01/show_books/',
                method:'get',
                params:{'current_page':this.current_page}
            }).then(resp=>{
                console.log(resp.data)
                this.book_list=resp.data.data
                this.page_list=resp.data.page_list
                this.page_sum=resp.data.page_sum
            })
        },
        get_page(pagenum){
            console.log(pagenum)
            this.current_page=pagenum
            this.show_books()
        },
        up_page() {
            if(this.current_page > 1) {
                this.current_page --
                this.show_books()
            }
        },
        down_page() {
            if(this.current_page < this.page_sum) {
                this.current_page ++
                this.show_books()
            }
        },
        delbooks(book_id) {
            let fdata=new FormData()
            fdata.append('book_id',book_id)
            axios({
                url:this.base_url + '/app01/show_books/',
                method:'delete',
                data:fdata
            }).then(resp=>{
                if(resp.data.code==200){
                    this.show_books()
                }
            })
        }
    },
    created() {
        this.show_books()
    }
}
</script>

<style>

</style>